<template>
	<div class="app-page">
		<div class="topbg"><img src="../../assets/image/cxjpsessions/bg1.jpg" /></div>
		<section class="naodong">
			<a :href="floor1.url"><img :src="floor1.imgUrl" /></a>
		</section>
		<section class="floor">
			<h2 class="txt bg1"> {{ floor2.txt }} </h2>
			<h3 class="f-txt" style="margin-bottom:2.3rem"> {{ floor2.ftxt }} </h3>
			<div class="sent-tickets-wrap" v-for = "(item,index) in floor2.data" >
				<div class="tickets-Img">
					<img :src="item.imgUrl" />
				</div>
				<ul  v-if="index==0" class="tickets-list">
					<li v-for="(i,index) in item.list" @click="toggleDialog('cIndex'+index, true)"><span class="price">¥<i> {{i.price}} </i>起</span><h2>{{i.name}}</h2><p v-if="i.des"> {{i.des}} </p></li>
				</ul>
				<ul  v-else class="tickets-list">
					<li v-for="(i,index) in item.list" :ca="i.des | addCaToBuyCard" @click="showSelectCity(i.skuCode)"><span class="price">¥<i> {{i.price}} </i></span><h2>{{i.name}}</h2><p v-if="i.des"> {{i.des}} </p></li>
				</ul>
			</div>
		</section>
		<section class="floor">
			<h2 class="txt bg2"> {{ floor3.txt }} </h2>
			<h3 class="f-txt"> {{ floor3.ftxt }} </h3>
			<ul class="tyre-wrap">
				<li v-for="(item,index) in floor3.list"  :class="{'tyre-Img': index == 0}">
					<div v-if="index==0">
						<a :href="item.url" :ca="item.tips | addCaToBuyCoupon"><img :src="item.imgUrl" /><p class="tip" v-if="item.tips !=''"> {{ item.tips }} </p></a>
					</div>
					<div v-else>
						<a :ca="item.txt | addCaToBuyCoupon" :href="item.url">
							<h3> {{ item.txt }} </h3>
							<!--<p class="des"> {{ item.des }} </p>-->
							<p><img :src="item.imgUrl" /></p>
							<p class="price">¥<i>{{ item.price }} </i><s class="del">门市价¥{{ item.del }}</s></p>
							<span class="view">查看详情</span>
						</a>
					</div>
				</li>
			</ul>
		</section>
		<section class="floor">
			<h2 class="txt bg4"> {{ floor4.txt }} </h2>
			<h3 class="f-txt"> {{ floor4.ftxt }} </h3>
			<ul class="wrap">
				<li v-for = "item in floor4.list">
					<a v-if = "item.isCard" :ca="item.title | addCaToBuyCard" href="javascript:;"  @click="showSelectCity(item.skuCode)">
						<div class="simg"><img :src="item.imgUrl" /></div>
						<div class="des" v-html="item.title"></div>
						<div class="priceInfo">
							<div class="info-l">
								<span class="price">¥<i>{{ item.price }}</i></span>
								<s class="del">门市价¥{{ item.del }}</s>
							</div>
							<div class="info-r"><span class="tobtn">立即抢购</span></div>
						</div>
					</a>
					<a v-else :ca="item.title | addCaToBuyCoupon" :href="item.url">
						<div class="simg"><img :src="item.imgUrl" /></div>
						<div class="des" v-html="item.title"></div>
						<div class="priceInfo">
							<div class="info-l">
								<span class="price">¥<i>{{ item.price }}</i></span>
								<s class="del">门市价¥{{ item.del }}</s>
							</div>
							<div class="info-r"><span class="tobtn">立即抢购</span></div>
						</div>
					</a>
				</li>
			</ul>
		</section>
		<section class="floor">
			<h2 class="txt bg4"> {{ floor5.txt }} </h2>
			<h3 class="f-txt"> {{ floor5.ftxt }} </h3>
			<ul class="wrap">
				<li v-for = "item in floor5.list">
					<a v-if = "item.isCard"  :ca="item.title | addCaToBuyCard" href="javascript:;" @click="showSelectCity(item.skuCode)">
						<div class="simg"><img :src="item.imgUrl" /></div>
						<div class="des" v-html="item.title"></div>
						<div class="priceInfo">
							<div class="info-l">
								<span class="price">¥<i>{{ item.price }}</i></span>
								<s class="del">门市价¥{{ item.del }}</s>
							</div>
							<div class="info-r"><span class="tobtn">立即抢购</span></div>
						</div>
					</a>
					<a v-else :ca="item.title | addCaToBuyCoupon" :href="item.url">
						<div class="simg"><img :src="item.imgUrl" /></div>
						<div class="des" v-html="item.title"></div>
						<div class="priceInfo">
							<div class="info-l">
								<span class="price">¥<i>{{ item.price }}</i></span>
								<s class="del">门市价¥{{ item.del }}</s>
							</div>
							<div class="info-r"><span class="tobtn">立即抢购</span></div>
						</div>
					</a>
				</li>
			</ul>
		</section>
		<section class="banner"><a :href="floor6.url" ca="201788_cxjh5_tocplink$banner去车品"><img :src="floor6.imgUrl" /></a></section>
		<footer>
			<ul class="footNav">
				<li v-for = "(item,index) in footNav" :class="{cur: index == 1 }"><a :href="item.url" :ca="item.navTitle | footNavCa"><h2> {{item.navTitle}} </h2><p> {{item.navDes}} </p></a></li>
			</ul>
		</footer>
		<div class="slidebar">
			<a :href="sideBar.url" class="icon-tozhu" ca="201788_cxjh5_cxjfhc_sidebar_tozhu$主会场"></a>
			<a href="javascript:void(0)" v-if="isApp" @click="share" class="btn-share" ca="201788_cxjh5_cxjfhc_sidebar_share$分享"></a>
			<a href="javascript:void(0)" @click="goTop" class="gotop" ca="201788_cxjh5_cxjfhc_sidebar_Top$返回顶层"></a>
		</div>
		<mt-popup  v-model="popCoupon">
			<div class="dialog">
				<i class="close" ca="201788_cxjh5_closeDialog$关闭活动规则弹窗" @click="toggleDialog('popCoupon', false)"></i>
				<h3>活动规则</h3>
				<div class="dialog-con">
					<div class="content" v-html = "activeInfo"></div>
				</div>
				<a href="javascript:void(0);" ca="201788_cxjh5_closeDialog$关闭活动规则弹窗" class="dbtn" @click="toggleDialog('popCoupon', false)">我知道了</a>
			</div>
		</mt-popup>
		<mt-popup v-model="cIndex0">
			<div class="dialog nopadding">
				<i class="close" @click="toggleDialog('cIndex0', false)"></i>
				<h3>请选择</h3>
				<div class="dialog-con">
					<ul class="dataList">
						<li v-for = "item in floor2.data[0].list[0].arr"><a class="aflex" :ca="item.title | addCaBuyCoupon" :href="item.url"><h4> {{ item.title }}<span> {{ item.des }} </span> </h4><span class="price">¥<i>{{  item.price }}</i></span><s class="del"> ¥{{ item.del }} </s></a></li>
					</ul>
				</div>
			</div>
		</mt-popup>
		<mt-popup v-model="cIndex1">
			<div class="dialog nopadding">
				<i class="close" @click="toggleDialog('cIndex1', false)"></i>
				<h3>请选择</h3>
				<div class="dialog-con">
					<ul class="dataList">
						<li v-for = "item in floor2.data[0].list[1].arr"><a class="aflex" :ca="item.title | addCaBuyCoupon" :href="item.url"><h4> {{ item.title }} <span> {{ item.des }} </span></h4><span class="price">¥<i>{{  item.price }}</i></span> <s class="del"> ¥{{ item.del }} </s></a></li>
					</ul>
				</div>
			</div>
		</mt-popup>
		<mt-popup v-model="cIndex2">
			<div class="dialog nopadding">
				<i class="close" @click="toggleDialog('cIndex2', false)"></i>
				<h3>请选择</h3>
				<div class="dialog-con">
					<ul class="dataList">
						<li v-for = "item in floor2.data[0].list[2].arr"><a class="aflex" :ca="item.title | addCaBuyCoupon" :href="item.url"><h4> {{ item.title }} <span> {{ item.des }} </span></h4><span class="price">¥<i>{{  item.price }}</i></span> <s class="del"> ¥{{ item.del }} </s></a></li>
					</ul>
				</div>
			</div>
		</mt-popup>
	</div>
</template>

<script>
import common from "../../assets/js/common.js";
import {Toast, Popup} from 'mint-ui';
import Vue from 'vue';
var resourcePath = '/cms/wap/resource/chexiangjiaM/active/1788fhc/image/',
    resourceDomain = process.env.NODE_ENV == 'prod' ? '//s1.cximg.com'+ resourcePath : common.isEnv('//s1') + resourcePath;
Vue.component(Popup.name, Popup);
export default {
    data() {
        return {
          popCoupon: false,
					popOil: false,
					cIndex0: false,
					cIndex1: false,
					cIndex2: false,
          signUrl: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? common.isEnv("//recruit") : common.isEnv("//wx"),
					isApp: common.isApp(),
					loadAppUrl: '//cxb.chexiang.com/service/version/getLatestAppVersion/0?channel=cx_cxj_xzy_0730_88tckyl',
          getCityUrl: common.isdev() + '/service/homePage/getCXJCityInfoList/0',
					floor1:{
						url: process.env.NODE_ENV == 'development' ? '/share/share.html' : common.isEnv('//cxj.activity') + '/cx/cxj/cxjweb/share/share.shtml',
						imgUrl: resourceDomain + 'floor1.jpg'
					},
					floor2:{
						txt: '以养代修',
						ftxt: '保养省钱秘笈',
						tips: '活动规则',
						data:[
							{
								imgUrl: resourceDomain + 'floor2_1.jpg',
								list:[
									{
										name: '高级全合成换油套餐',
                    des:'(嘉实多、壳牌、赛倍飒)',
										price: '568',
                    isCard: false,
										arr:[
											{
												title:'4L 高端全合成油',
                        des:'(嘉实多、壳牌、赛倍飒)',
												price:'568',
                        del:'828',
												url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7DA4DD5A80D74A8F7BD365C8E045E6F8.htm') : this.changeUrl('A0DE0AAC4FAFE9FD7FCDECCC5F500479.htm')
											},
											{
												title:'5L 高端全合成油',
                        des:'(嘉实多、壳牌、赛倍飒)',
												price:'688',
                        del:'918',
												url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7DA4DD5A80D74A8F13D883593C3BD501.htm') : this.changeUrl('A0DE0AAC4FAFE9FDF50A8C6919E36A3E.htm')
											}
										]
									},
									{
										name: '全合成换油套餐',
                    des:'(嘉实多、壳牌、赛倍飒)',
										price: '438',
                    isCard: false,
										arr:[
											{
												title:'4L 全合成油',
                        des:'(嘉实多、壳牌、赛倍飒)',
												price:'438',
                        del:'598',
												url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('ACCEEBC0A186ED65FAD8682C93D9D203.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7DA4DD5A80D74A8F26099395781F7E22.htm') : this.changeUrl('A0DE0AAC4FAFE9FD13D883593C3BD501.htm')
											},
											{
												title:'5L 全合成油',
                        des:'(嘉实多、壳牌、赛倍飒)',
												price:'528',
                        del:'718',
												url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('ACCEEBC0A186ED65FAD8682C93D9D203.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7DA4DD5A80D74A8F1940FDC5CF2E79D3.htm') : this.changeUrl('1B47E1B4F19C8B49D590A5531A46412D.htm')
											}
										]
									},
									{
										name: '半合成换油套餐',
                    des:'(嘉实多、壳牌、赛倍飒)',
										price: '368',
                    isCard: false,
										arr:[
											{
												title:'4L 半合成油',
                        des:'(嘉实多、壳牌、赛倍飒)',
												price:'368',
                        del:'468',
												url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7DA4DD5A80D74A8F7FCDECCC5F500479.htm') : this.changeUrl('A0DE0AAC4FAFE9FD1940FDC5CF2E79D3.htm')
											},
											{
												title:'5L 半合成油',
                        des:'(嘉实多、壳牌、赛倍飒)',
												price:'428',
                        del:'568',
												url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7DA4DD5A80D74A8FF50A8C6919E36A3E.htm') : this.changeUrl('1B47E1B4F19C8B49FAD8682C93D9D203.htm')
											}
										]
									}
								]
							},
							{
                imgUrl: resourceDomain + 'floor2_2.jpg',
								list:[
									{
										name: '赛倍飒保养清洁套餐',
										des: '(半合成小保养+发动机无损清洗+节气门清洗)',
										price: '498',
                    isCard: true,
										skuCode:  process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? '1045721'	: process.env.NODE_ENV == 'pre' ? '1067453' : '1077149'
									},
									{
										name: '赛倍飒保养清洁套餐',
										des: '(全合成小保养+发动机无损清洗+节气门清洗)',
										price: '628',
                    isCard: true,
										skuCode: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? '1045720'	: process.env.NODE_ENV == 'pre' ? '1067454' : '1077150'
									},
									{
										name: '赛倍飒保养清洁套餐',
										des: '(高级全合成小保养+发动机无损清洗+节气门清洗)',
										price: '828',
                    isCard: true,
										skuCode: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? '1045720'	: process.env.NODE_ENV == 'pre' ? '1067455' : '1077151'
									}
								]
							}
						]
					},
					floor3: {
						txt: '轮胎专区',
						ftxt: '美轮美奂  疯狂直降',
						list: [
							{
								imgUrl: resourceDomain + 'floor3_1.jpg',
								tips: '',
								url: 'javascript:;',
                isCard: false,
							},
							{
								imgUrl: resourceDomain + 'floor3_2.jpg',
								txt: '途观专区 17寸',
								des: '途观1.4T  1.8T 风尚版 舒适版车型可使用',
								price: '470',
								del: '830',
								url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7C692EF55A083499FAD8682C93D9D203.htm') : this.changeUrl('290E72BCA0ED405882D400F4466BBE4A.htm'),
                isCard: false,
							},
							{
								imgUrl: resourceDomain + 'floor3_3.jpg',
								txt: '帕萨特专区 18寸',
								des: '1.8TDGS领尊版、2.0TDSG旗舰版车型可使用',
								price: '570',
								del: '980',
								url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7C692EF55A08349982D400F4466BBE4A.htm') : this.changeUrl('290E72BCA0ED405835E9B08969199539.htm'),
                isCard: false,
							},
							{
								imgUrl: resourceDomain + 'floor3_4.jpg',
								txt: '君威专区 17寸',
								des: '君威1.6T 领先、时尚、精英技术型车型可使用',
								price: '470',
								del: '830',
								url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7C692EF55A08349935E9B08969199539.htm') : this.changeUrl('290E72BCA0ED40587BD365C8E045E6F8.htm'),
                isCard: false,
							},
							{
								imgUrl: resourceDomain + 'floor3_5.jpg',
								txt: '君越专区 18寸',
								des: '2.0T 尊享型、豪华型、精英型车型可使用',
								price: '570',
								del: '980',
								url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7C692EF55A0834997BD365C8E045E6F8.htm') : this.changeUrl('290E72BCA0ED405826099395781F7E22.htm'),
                isCard: false,
							},
							{
								imgUrl: resourceDomain + 'floor3_6.jpg',
								txt: '昂科威专区 17寸',
								des: '17款：1.5T两驱技术型、1.5T四驱豪华型...车型可使用',
								price: '470',
								del: '830',
								url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('7C692EF55A08349926099395781F7E22.htm') : this.changeUrl('290E72BCA0ED40587FCDECCC5F500479.htm'),
                isCard: false,
							}
						]
					},
					floor4:{
						txt: '爆款推荐',
						ftxt: '拒绝套路  诚意推荐',
						list: [
							{
								imgUrl: resourceDomain + 'floor4_1.jpg',
								url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77CD590A5531A46412D.htm') : this.changeUrl('1B47E1B4F19C8B4935E9B08969199539.htm'),
								title: '打蜡（5座）+检测套餐',
								price: '59',
								del: '145',
                isCard: false
							},
							{
								imgUrl: resourceDomain + 'floor4_2.jpg',
								url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77CFAD8682C93D9D203.htm') : this.changeUrl('1B47E1B4F19C8B497BD365C8E045E6F8.htm'),
								title: '精致洗车＋打蜡（5座）套餐',
								price: '168',
								del: '280',
                isCard: false
							},
							{
								imgUrl: resourceDomain + 'floor4_3.jpg',
								url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77C82D400F4466BBE4A.htm') : this.changeUrl('1B47E1B4F19C8B4926099395781F7E22.htm'),
								title: '空调清洗除臭＋空气净化套餐',
								price: '219',
								del: '659',
                isCard: false
							},
							{
								imgUrl: resourceDomain + 'floor4_4.jpg',
								url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77C35E9B08969199539.htm') : this.changeUrl('1B47E1B4F19C8B497FCDECCC5F500479.htm'),
								title: '空调管路清洗+可视化空调蒸发箱清洗套餐',
								price: '399',
								del: '797',
                isCard: false
							},
              {
								imgUrl: resourceDomain + 'floor4_5.jpg',
								skuCode: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? '1045721'	: process.env.NODE_ENV == 'pre' ? '' : '1073091',
								title: '焕新美容卡 A<br/>立返100元车享金',
								price: '1588',
								del: '3030',
                isCard: true
							},
              {
								imgUrl: resourceDomain + 'floor4_6.jpg',
								skuCode: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? '1045720'	: process.env.NODE_ENV == 'pre' ? '' : '1073092',
								title: '焕新美容卡 B<br/>立返200元车享金',
								price: '2988',
								del: '6150',
                isCard: true
							}
						]
					},
					floor5: {
						txt: '店长推荐',
						ftxt: '爱车必备 给你最好的',
						list: [
							{
								imgUrl: resourceDomain + 'floor5_1.jpg',
								url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77C7BD365C8E045E6F8.htm') : this.changeUrl('1B47E1B4F19C8B4913D883593C3BD501.htm'),
								title: '进气系统免拆清洗+节气门清洁套餐',
								price: '348',
								del: '679',
                isCard: false
							},
							{
								imgUrl: resourceDomain + 'floor5_2.jpg',
								url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77C26099395781F7E22.htm') : this.changeUrl('1B47E1B4F19C8B491940FDC5CF2E79D3.htm'),
								title: '发动机舱清洁镀膜+精致洗车套餐',
								price: '198',
								del: '340',
                isCard: false
							},
							{
								imgUrl: resourceDomain + 'floor5_3.jpg',
								url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77C7FCDECCC5F500479.htm') : this.changeUrl('1B47E1B4F19C8B49F50A8C6919E36A3E.htm'),
								title: '全车内饰清洁+打蜡（5座）套餐',
								price: '288',
								del: '480',
                isCard: false
							},
							{
								imgUrl: resourceDomain + 'floor5_4.jpg',
								url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77C13D883593C3BD501.htm') : this.changeUrl('290E72BCA0ED4058D590A5531A46412D.htm'),
								title: '全车内饰清洁+精致洗车套餐',
								price: '368',
								del: '520',
                isCard: false
							},
              {
								imgUrl: resourceDomain + 'floor5_5.jpg',
								url: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77C1940FDC5CF2E79D3.htm') : this.changeUrl('290E72BCA0ED4058FAD8682C93D9D203.htm'),
								title: '外部深度护理套餐(精致洗车+机器打蜡+机舱清洁镀膜)',
								price: '299',
								del: '498',
                isCard: false
							},
              {
								imgUrl: resourceDomain + 'floor5_6.jpg',
								skuCode: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? ''	: process.env.NODE_ENV == 'pre' ? '' : '1069369',
								title: '车享家定牌雨刮套餐(车享家定牌雨刮一副+前档玻璃镀膜)',
								price: '298',
								del: '488',
                isCard: true
							}
						]
					},
					floor6: {
            imgUrl: resourceDomain + 'h5-banner.png',
						url: common.isEnv('//h.mall') +  '/yxsc/88/index.shtml?channel=cx_cxj_huichangh5cxj_201788'
					},
					activeInfo: '买保养送机油（补液券）使用规则：<br />①补液券发送时间：<br />用户至车享家门店完成保养服务后，系统将推送4张补液券至用户APP账户，用户可至车享家APP个人账户-优惠券中进行查看；<br />②补液券使用方式：<br />用户至车享家门店出示APP账户中补液券券码进行下单，一张补液券可享受免费添加机油服务一次（仅限0.25L），或免费添加防冻液一次（仅限1L），或免费添加雨刮水。<br />③补液券有效期：<br />自发放之日起120天内有效，用户须在券有效期内到店完成服务，过期未到店使用将失效； <br />④补液券不可兑换现金，不找零，不与其他活动共享；<br />⑤补液券仅限门店使用，不可外带；<br />⑥补液券仅限本车使用；',
					footNav: [
						{
               navTitle: '买车',
               navDes: '万元开回家',
							 url: common.isEnv('//c')  + '/promotion/88xinche.htm?channel=cx_zc_201788_cxjh5_20170801'
					  },
						{
               navTitle: '养车',
               navDes: '保养省钱秘笈',
							 url:  'javascript:;'
					  },
						{
               navTitle: '车品',
               navDes: '低至8.8元',
							 url: common.isEnv('//h.mall') +  '/yxsc/88/index.shtml?channel=cx_chepin_201788_yangche'+ (common.isApp() ? 'APP' : 'H5') +'_20170726'
					  },
						{
               navTitle: '卖车',
               navDes: '1500元增值金',
							 url: common.isEnv('//m.2') +  '/activity/20170808.htm?utm_source=jiah520170808'
					  }
					],
					sideBar:{
						navTitle: '主会场',
						url: common.isEnv('//c') + '/promotion/88zhuhuichang.htm?channel=cx_home_201788_cxjh5_20170801'
					}
        }
    },
    mounted () {
      //打点
      this.$nextTick(function () {
      	common.ANA_AnalyticsScan();
      });

			//分享
      this.initShareInfo();

			//ios btn的active属性生效
			var a=document.getElementsByTagName('a');
			for(var i=0;i<a.length;i++){a[i].addEventListener('touchstart',function(){},false);}

			//监控返回顶部按钮是否显示
			this.isShowTopBtn();
    },
		/*filters: {
			//非App跳下载App
      isApp( val ){
        if( !common.isApp() ){
				//	return '//cxb.chexiang.com/service/version/getLatestAppVersion/0?channel=';
				}else return val;
			}
		},*/
		filters: {
			addCaToBuyCoupon (val) {
        return '201788_cxjh5_buyCoupon$' + val;
			},
			addCaToBuyCard (val){
        if(common.isApp()) {
          return "201788_cxjh5_selectCity$" + val;
				}else {
          return "201788_cxjh5_buyCardToDownloadApp$" + val;
				}
			},
			addCaBuyCoupon (val) {
        return "201788_cxjh5_buyCoupon$" + val;
			},
			footNavCa (val) {
        return '201788_cxjh5_footNav$' + val;
			}
		},
    methods : {
			//分享信息
    	initShareInfo() {
				var _this = this;
				_this.shareObj = {
					friend:{
						title:"钜惠风暴 冰价来袭-养车优品夏日趴",
						desc:"FUN肆保养  品质套餐  明星单品   养车省钱最强攻略  动动手指 一省到底",
						imgUrl: "https://s1.cximg.com/cms/wap/resource/chexiangjiaM/active/1788fhc/image/share.png",
						link: common.isEnv("//cxjapp") +"/cx/cxj/cxjweb/cxjpsessions/cxjpsessions.shtml?channel=cx_cxj_201788_cxjshare_20170801"
					},
					friendQuan:{
						title:"钜惠风暴 冰价来袭-养车优品夏日趴",
						desc:"FUN肆保养  品质套餐  明星单品   养车省钱最强攻略  动动手指 一省到底",
						imgUrl: "https://s1.cximg.com/cms/wap/resource/chexiangjiaM/active/1788fhc/image/share.png",
						link: common.isEnv("//cxjapp") +"/cx/cxj/cxjweb/cxjpsessions/cxjpsessions.shtml?channel=cx_cxj_201788_cxjshare_20170801"
					}
				}

				//分享判断渠道
				if(!_this.isApp){
					common.wxShare(_this);
				}
			},
			//分享
			share() {
				var _self = this;
				lb.shareInfo({
					title: _self.shareObj.friend.title,
					url: _self.shareObj.friend.link,
					content: _self.shareObj.friend.desc,
					imgUrl: _self.shareObj.friend.imgUrl
				} ,(data) => {
					if (data.errorCode === '0') {
							//Toast('分享成功');
					}else{
							Toast('分享失败');
					}
				});
			},
			//弹窗
			toggleDialog(d, flag) {
				if(flag) {
					document.body.style.overflow="hidden";
				}else {
					document.body.style.overflow="auto";
				}
				this[d] = flag;
			},
			//选择城市
			showSelectCity(code) {
				var _this = this;
				if(_this.isApp) {
					//window.location.href = common.isEnv('//cxj.activity') + '/service/error/check_login_and_tologin?backUrl='+encodeURI(common.isEnv("//cxjapp") + '/cx/cxj/cxjweb/cxjpsessions/selectCity/selectCity.' + common.isHtml() + '?skuCode=' + code);
					window.location.href = "selectCity/selectCity." + common.isHtml() + '?skuCode=' + code;
				}else {
					window.location.href = _this.loadAppUrl;
				}
			},
			//判断渠道是否加checklogin, app加前置登录
			changeUrl (val) {
				if(val =='') return 'javascript:void(0)';
				if(common.isApp()){
					return common.isEnv('//cxj.activity') + "/service/error/check_login_and_tologin?backUrl="+encodeURI(common.isEnv('https://h.mall') + '/mdseDetail_v2/' + val);
				}else {
					return common.isEnv('//h.mall') + '/mdseDetail_v2/' + val;
				}
			},
			//返回顶部
			goTop() {
				//获取当前scrollTop的位置
				var curScroll = $(document.body).scrollTop();

				//上升的位移
				var speed = 5;
				if(curScroll>0){
						setInterval(timer,1);
				}
				function timer(){
					if(curScroll>0){
						curScroll = curScroll-speed;
						$(document.body).scrollTop(curScroll);
						if(curScroll<=0){
							$(document.body).scrollTop(0);
							clearInterval(timer);
							//console.log("清除计时器")
						}
					}
				}
			},
			isShowTopBtn() {
				$(window).scroll(()=>{
					let top = document.documentElement.scrollTop || document.body.scrollTop;
          if(top >= 30) {
						$(".gotop").css('display','block');
					}
					else {
						$(".gotop").css('display','none');
					}
				})
			}
    }
}

</script>

<style lang="scss" scope>
@import '../../assets/css/common.scss';
img{display:block;width:100%;max-width:100%;height:auto;}
.center{text-align:center;}
$txtbg:(".bg1":'../../assets/image/cxjpsessions/sec1_bg.jpg', ".bg2":'../../assets/image/cxjpsessions/sec2_bg.jpg', ".bg3":'../../assets/image/cxjpsessions/sec3_bg.jpg', ".bg4":'../../assets/image/cxjpsessions/sec4_bg.jpg');
@each $bg, $url in $txtbg {
  #{$bg} {
    background: url($url) no-repeat;
		background-size:100% 100%;
  }
}
.sideBtn{height:rem(41);width:rem(41);display:inline-block;margin-bottom:rem(12);border-radius: 50%;box-shadow: 0 1px 1px #555;}
.dot{content:"";position:absolute;top:50%;right:rem(10);width:rem(8);height:rem(11.5);background:url(../../assets/image/cxjpsessions/dot.png) no-repeat;background-size:100% 100%;transform:translateY(-50%);}
.price{color:#fc2222;font-size:rem(15);
	i{font-size:rem(20)}
}
a,a:active{color:$_333;}
.highNav{background:url(../../assets/image/cxjpsessions/nav-hover.png) no-repeat;background-size:100% 100%;}
$border:#ebebeb;
body{font-size:16px;background-color:#3f85db;color:$_333;font-size:rem(12);max-width:750px;margin:0 auto;font-family:$font-family;
  .app-page{padding-bottom:rem(50);
	  .naodong{height:rem(245);padding:rem(33) rem(9) rem(21);background:url(../../assets/image/cxjpsessions/bg2.jpg) no-repeat;background-size:100% 100%;}
		.floor{padding-top:rem(18);background:$_fff;margin:0 rem(10) rem(10);
			.txt{@extend .center;height:rem(36.5);font-size:rem(25);}
			.f-txt{@extend .center;font-size:rem(15);color:$_999}
			.showAQ{@extend .center;color:$_333;display:block;padding:rem(20) 0;text-decoration:underline;}
			.sent-tickets-wrap{
				&:nth-of-type(2) .tickets-Img{border-top:none;}
				.tickets-Img{position:relative;border-top:1px solid $border;border-bottom:1px solid $border;
					.flag{width:rem(38);height:rem(38);@extend .center;background:#fb2b2b;color:$_fff;position:absolute;top:0;left:rem(10);display:block;
						i{display:block;@extend .center;font-size:rem(14)}
					}
				}
				.tickets-list{
					li{border-bottom:1px solid $border;padding:rem(12.5) rem(15) rem(12.5) rem(10);position:relative;
						&:after{@extend .dot;}
						h2{font-size:rem(15);color:$_333;font-weight:bold;}
						p{color:$_666;}
						.price{position:absolute;right:rem(35);top:50%;transform:translateY(-50%);}
					}
				}
			}
			.tyre-wrap{background:$border;margin-top:rem(20);
				li{width:rem(116);height:rem(170);display:inline-block;overflow:hidden;margin:0 rem(3.5) rem(3.5) 0;background:$_fff;vertical-align:top;position:relative;padding:rem(10) rem(5);
					&:nth-child(n+3){margin-bottom:0;}
					&:nth-child(3n){margin-right:0;}
					&:nth-child(2),&:nth-child(3){border-top:1px solid #ebebeb;}
					h3{font-size:rem(14);margin-bottom:rem(15);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
					.des{margin:rem(5) 0 rem(5);height:rem(55);line-height:1.5;overflow:hidden;display: -webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;color:$_999;}
					@at-root .del{color:$_999;}
					.del{font-size:rem(10)}
					.view{position:absolute;bottom:0;left:0;width:100%;background:#00b7ee;padding:rem(5) 0;color:$_fff;@extend .center;}

				}
				.last{margin-right:0;}
				.tyre-Img{padding:0;
					.tip{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;bottom:rem(11);background:#697682;padding:rem(7) rem(10);color:$_fff;}

				}
			}
			.wrap{background:$border;margin-top:rem(20);
				li{width:rem(175.6);height:rem(205);overflow:hidden;display:inline-block;margin-bottom:rem(2.5);background:$_fff;
					&:nth-child(2n){margin-left:rem(2.5)}
					&:nth-child(n+5){margin-bottom:0;}
					&:nth-child(1),&:nth-child(2){border-top:1px solid #ebebeb;}
					.simg{height:rem(120);}
					.des,.priceInfo{padding:0 rem(10);}
					.des{color:$_333;height:rem(40);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:rem(7)}
					.priceInfo{
						.info-l{float:left;line-height:1;
							.price{position:relative;top:rem(-2)}
							.del{display:block;font-size:rem(10)}
						}
						.info-r{width:rem(90);float:right;
							.tobtn{background:#f51c1c;border-radius:rem(10);font-size:rem(13);color:$_fff;text-align:center;display:block;height:rem(25);line-height:rem(25)}
						}

					}
				}
			}

		}
		footer{position:fixed;bottom:0;z-index:3;
			.footNav{display:table;margin:0 auto;
				li{width:rem(93.5);height:rem(49);display:table-cell;@extend .center;background:url(../../assets/image/cxjpsessions/nav-normal.png) no-repeat;background-size:100% 100%;
					&:active{@extend .highNav}
				}
				.cur{@extend .highNav;
					a{color:$_fff;}
				}
				h2{font-size:rem(14)}
				p{font-size:rem(10)}
			}
		}
		.dialog{width:rem(300);margin:0 auto;padding:rem(17) rem(15);
			@at-root .mint-popup{border-radius:rem(10);}
			.close{width:rem(18.5);height:rem(18.5);position:absolute;top:rem(10);right:rem(10);background:url(../../assets/image/cxjpsessions/icon-close.png) no-repeat;background-size:100% 100%;}
			h3{text-align:center;font-weight:bold;@extend .center;font-size:rem(15);margin-bottom:rem(10);}
			.dialog-con{max-height:rem(285);overflow:auto;-webkit-overflow-scrolling:touch;margin-bottom:rem(10);
				h2{position:relative;@extend h3;}
				.content{line-height:1.8;padding-bottom:rem(15);font-size:rem(13);color:$_666;
					&:first-of-type{/*border-bottom:1px solid #ccc;margin-bottom:rem(15);*/}
				}
				.dataList{
					li{position:relative;width:100%;padding:rem(10);border-top:1px solid #efefef;
						.aflex{display:flex;align-items:center;}
						&:last-child{border-bottom:1px solid #efefef;}
						&:after{content:"";position:absolute;top:50%;right:rem(10);width:rem(8);height:rem(11.5);background:url(../../assets/image/cxjpsessions/dot.png) no-repeat;background-size:100% 100%;transform:translateY(-50%);}
						h4{width:rem(185);font-size:rem(13);
              span{font-size:rem(11);color:$_666;display:block;}
            }
						.del{margin-left:rem(10)}
						&:active{background:#1f9bde;color:$_fff;
							h4,.price,.del{color:$_fff;}
							&:after{background:url(../../assets/image/cxjpsessions/dot1.png) no-repeat;background-size:100% 100%;}
						}
					}
				}
			}
			.dbtn{background:#1f9bde;border-radius:rem(20);width:rem(160);height:rem(30);line-height:rem(30);display:block;margin:0 auto;@extend .center;font-size:rem(15);color:$_fff;}
		}
		.banner{margin:rem(15) 0 rem(25)}
		.slidebar{position: fixed;width:rem(41); bottom:rem(50);right:rem(6);z-index: 200;
			.gotop{@extend .sideBtn;display:none;background:url(../../assets/image/cxjpsessions/icon-gotop.png) no-repeat;background-size:100%;}
			.btn-share{@extend .sideBtn;background:url(../../assets/image/cxjpsessions/btn-icon-share.png) no-repeat;background-size:100%;}
			.icon-tozhu{@extend .sideBtn;background:url(../../assets/image/cxjpsessions/icon-tozhu.png) no-repeat;background-size:100%;}
		}
		.nopadding{padding:rem(17) 0;}
	}
}
</style>
